<template>
	<!-- banner轮播 -->
	<view class="diy-banner">
		<swiper @change="swiperChange" :snap-to-edge="true" :autoplay="autoplay" :class="'banner-box swiper-box-banner'"
			:duration="duration" circular :indicator-dots="indicatorDots" indicator-color="#EFEFF0">
			<swiper-item v-for="(banner, index) in dataList" :key="banner.id"
				@tap.stop.prevent="navigationTo(banner.linkUrl,banner.type)">
				<view class="swiper-slide-image">
					<image class="slide-image" :style="'border-radius: ' + borderRadius" :src="banner.fileUrl"
						mode="aspectFill"></image>
				</view>
				<!-- <uv-image mode="aspectFill" class="slide-image" :src="banner.fileUrl" :lazyLoad="true"
					:observeLazyLoad="true" width="100%" height="100%"></uv-image> -->
			</swiper-item>
		</swiper>
		<view class="indicator" v-if="dataList&&dataList.length>1">
			<view class="dot" :class="{active: currentSwiperIndex===index}" v-for="(item,index) in dataList"
				:key="index">

			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				duration: 800, // 滑动动画时长
				indicatorDots: false,
				currentSwiperIndex: 0
			};
		},
		options: {},
		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			dataList: Array,
			// 是否自动切换
			autoplay: {
				type: Boolean,
				default: true
			},
			borderRadius: {
				type: String,
				default: '40rpx'
			},
		},
		computed: {
			// indicatorDots() {
			// 	return 1 < this.dataList.length;
			// }
		},
		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {
			/**
			 * 跳转到指定页面
			 */
			navigationTo: function(url, type) {
				if (type) {
					return
				}
				app.navigationTo(url);
			},
			swiperChange(e) {
				this.currentSwiperIndex = e.target.current;
			}
		}
	};
</script>
<style lang="scss">
	.swiper-box-banner {
		height: 300rpx;
	}

	.swiper-slide-image {
		box-sizing: border-box;
		padding: 0 24rpx;
		width: 100%;
		height: 100%;
	}

	.diy-banner {
		position: relative;

		// 指示器
		.indicator {
			position: absolute;
			left: 50%;
			bottom: 30rpx;
			transform: translate(-50%, 0);
			display: flex;
			justify-content: space-between;

			.dot:not(:last-of-type) {
				margin-right: 20rpx;
			}

			.active {
				width: 46rpx !important;
				border-radius: 7rpx !important;
			}

			.dot {
				transition: all .3s;
				flex-shrink: 0;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background-color: rgba(226, 233, 228, 0.64);
			}
		}
	}

	.diy-banner .slide-image {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
		margin-bottom: 2rpx;
	}

	/* banner组件按钮 */

	.swiper-box .wx-swiper-dot {
		height: 20rpx;
		width: 20rpx;
	}

	.swiper-box.dot-rectangle .wx-swiper-dot {
		width: 30rpx;
		border-radius: unset;
	}

	.swiper-box.dot-square .wx-swiper-dot {
		border-radius: unset;
	}
</style>